
/*
 *  公式:  小图/大图=小区域/大区域
 *   只能修改小区域
 *   小区域=(小图/大图)*大区域
 *  比例=大区域/小区域
 * */

//10/40=2/15


$(window).on("load", function () {
    $("#smallArea").height(($("#smallImg").height() / $("#bigImg").height()) * $("#bigArea").height());
    $("#smallArea").width(($("#smallImg").width() / $("#bigImg").width()) * $("#bigArea").width());

    var scale = $("#bigArea").height() / $("#smallArea").height()


    $("#smallImg").on("mouseenter", function (e) {
        $("#smallArea,#bigArea").show();

        $(this).on("mousemove", function (e) {

            var mX = e.pageX - $(this).offset().left - $("#smallArea").width() / 2;
            var mY = e.pageY - $(this).offset().top - $("#smallArea").width() / 2


            if (mX <= 0) {
                mX = 0;
            }
            if (mY <= 0) {
                mY = 0;
            }

            if (mX >= ($("#smallImg").width() - $("#smallArea").width())) {
                mX = ($("#smallImg").width() - $("#smallArea").width())
            }
            if (mY >= ($("#smallImg").height() - $("#smallArea").height())) {
                mY = ($("#smallImg").height() - $("#smallArea").height())
            }

            $("#smallArea").css({
                left: mX,
                top: mY
            })

            $('#bigImg').css({
                left: -mX * scale,
                top: -mY * scale
            })

        })

    }).on("mouseleave", function () {
        $("#smallArea,#bigArea").hide();
    })

})






